<template>
	<view class="">
		<view class="" :style="{ width: bodyWidth + 'px',height: bodyHeight + 'px' }">
			<!-- <image class="img_bg" src="../../static/bg.png" :style="{ height: bodyHeight + 'px' }"></image> -->
			<image class="img_bg" src="https://qiniu.sxpz.vip/http://tmp/ZLsavoEUTcfb1a30840284103f020f66646f7f3a4a50.png" :style="{ height: bodyHeight + 'px' }"></image>
			<view class="center">

				<form @submit="signUp()">
					<view class="login-change">
						<text style="color: #138AF0; font-size: 28rpx; margin-left: 175rpx;">注册</text>
					</view>

					<!-- 账号密码输入框 -->
					<input class="input" placeholder-class="holder" v-model="signForm.username" placeholder="请输入手机号" />
					<input class="input" style="margin-top: 40rpx;" v-model="signForm.psd1" password=""
						placeholder-class="holder" placeholder="请输入密码" />
					<input class="input" style="margin-top: 40rpx;" v-model="signForm.psd2" password=""
						placeholder-class="holder" placeholder="请再次输入密码" />
					<view class="input-btn">
						<input class="input" style="margin-top: 40rpx;" v-model="signForm.code"
							placeholder-class="holder" placeholder="请输入验证码" />
						<view class="checking" v-show="BtnStatus === true" @click="getVerify()"> 获取验证码 </view>
						<view class="state" v-show="BtnStatus === false" style="color: #fff;">
							倒计时{{countDownTime}}秒
						</view>
					</view>

					<!-- 回到登录页-->
					<view class="Logintext" @click="backLogin()">
						<text>已有账号?</text>
						<text style="color: #128BF1;">去登录</text>
					</view>
					<!-- 注册按钮 -->
					<button class="LoginBtn" @click="handleRegisterSubmit">注册</button>
				</form>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bodyWidth: '', //窗口宽高
				bodyHeight: '',
				state: true, // 控制点击验证码后显示倒计时
				currentTime: 0, //显示时间变量
				totalTime: 60, //总时间，单位秒
				recordingTime: 0, //记录时间变量
				signForm: {
					username: '',
					psd1: '',
					psd2: '',
					code: '',
				},
				// 验证码相关
				BtnStatus: true,
				countDownTime: 60,
				myEndTimeGet: '',
			}
		},
		onLoad() {
			this.bodyHeight = uni.getSystemInfoSync().windowHeight; // 把页面高度定成视口高度
			this.bodyWidth = uni.getSystemInfoSync().windowWidth;
			console.log('注册')
		},
		onUnload() {
			console.log('注册卸载')
		},
		methods: {
			// 注册提交
			async handleRegisterSubmit() {
				if (this.signForm.username.trim().length == 0) {
					return uni.showToast({
						title: '请输入电话号码',
						icon: 'none'
					})
				}
				if (!this.signForm.psd1) return uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				if (!this.signForm.psd2) return uni.showToast({
					title: '请输入确认密码',
					icon: 'none'
				})
				if (!this.signForm.code) return uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				if (this.signForm.psd1 != this.signForm.psd2) 
				return uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'none'
				})

				const {
					data: res
				} = await this.$myRequest({
					url: 'Public/reg',
					method: 'POST',
					data: {
						username: this.signForm.username,
						password: this.signForm.psd1,
						repassword: this.signForm.psd2,
						code: this.signForm.code,
					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})

				uni.navigateTo({
					url: `/pages/index/index`
				})
			},
			// 验证码倒计时
			GetCode() {
				let endMsRes = new Date().getTime() + 10000
				uni.setStorage({
					key: 'myEndTime',
					data: JSON.stringify(endMsRes)
				})
				this.codeCountDown(endMsRes)
			},
			codeCountDown(endMsRes) {
				this.BtnStatus = false
				this.countDownTime = Math.ceil((endMsRes - new Date().getTime()) / 1000)
				let time = setTimeout(() => {
					this.countDownTime--
					if (this.countDownTime < 1) {
						this.BtnStatus = true
						this.countDownTime = 60
						uni.removeStorage({
							key: 'myEndTime'
						});
						clearTimeout(time)
					} else {
						this.codeCountDown(endMsRes)
					}
				}, 1000)
			},

			// 验证码登陆点击获取验证码
			async getVerify() {
				// 手机号是否为空
				if (this.signForm.username.trim().length == 0) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				this.GetCode()
				const {
					data: res
				} = await this.$myRequest({
					url: 'Public/send_message',
					method: 'POST',
					data: {
						username: this.signForm.username,
					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				console.log('res', res);
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})

			},
			/* 
			注册方法 
			*/
			signUp() {
				uni.switchTab({
					url: '../client/client'
				})
			},

			/* 
			 回到登录页
			 */
			backLogin() {
				uni.redirectTo({
					url: './index'
				})
			},

		},

		async onLoad() {
			// console.log(123);
			let myEndTimeGet = ''
			uni.getStorage({
				key: 'myEndTime',
				success: (res) => {
					console.log(res.data);
					myEndTimeGet = res.data
					myEndTimeGet && this.codeCountDown(myEndTimeGet)
				}
			})

		},
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.state {
		position: absolute;
		width: 170rpx;
		height: 60rpx;
		right: 45rpx;
		top: 14rpx;
		color: #999999;
		border-radius: 26px;
		font-size: 22rpx;
		margin-left: 300rpx;
		text-align: center;
		background-color: #C0C8CD;
		line-height: 60rpx;
	}

	.login-change-btn2 {
		width: 260rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32px;
		position: absolute;
		top: -32rpx;
		right: 62rpx;
		line-height: 64rpx;

	}

	.login-change-btn1 {
		width: 399rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32px;
		position: absolute;
		top: -32rpx;
		line-height: 64rpx;
		margin-left: 62rpx;
	}

	.login-change {
		width: 399rpx;
		height: 64rpx;
		background-color: #FFFFFF;
		position: absolute;
		top: -32rpx;
		margin-left: 115rpx;
		box-shadow: 0px 3px 8px 0px rgba(10, 96, 194, 0.32);
		border-radius: 32px;
		line-height: 64rpx;
	}

	.input-btn {
		position: relative;
	}

	.zai-input {
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
	}

	.checking {
		position: absolute;
		width: 170rpx;
		height: 60rpx;
		right: 45rpx;
		top: 14rpx;
		color: #fff;
		border-radius: 26px;
		font-size: 22rpx;
		margin-left: 300rpx;
		text-align: center;
		background-color: #65BAFF;
		line-height: 60rpx;
		z-index: 99;
	}

	.LoginBtn {
		width: 570rpx;
		height: 80rpx;
		margin-top: 40rpx;
		background: linear-gradient(0deg, #037CE3, #2EB3FF);
		box-shadow: 2px 8px 9px 0px rgba(10, 106, 188, 0.14);
		border-radius: 40px;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.Logintext {
		margin-top: 20rpx;
		margin-left: 404rpx;
		font-size: 22rpx;
	}

	.img_bg {
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.center {
		width: 630rpx;
		height: 730rpx;
		margin-top: 392rpx;
		margin-left: 60rpx;
		background: #FFFFFF;
		border-radius: 20px;
		position: absolute;
	}

	.input {
		width: 540rpx;
		height: 80rpx;
		border: 1px solid #E5E5E5;
		border-radius: 40px;
		margin-top: 82rpx;
		margin-left: 30rpx;
		padding-left: 30rpx;
	}

	.holder {
		font-size: 26rpx;
	}
</style>
